<template>
  <div id="root" v-loading="loading">
    <div><img src="@/assets/logo.png" width="180" height="50" /> <img /></div>
    <div style="margin-top: 50px">
      <el-input
        class="input_auth"
        v-model="input"
        @change="input_change"
        placeholder="请输入密钥"
      ></el-input>
    </div>
    <div class="checkBox">
      <el-checkbox v-model="checked">记住密钥</el-checkbox>
    </div>
    <div class="login_button">
      <el-button
        class="button"
        type="primary"
        size="medium"
        @click="login_click"
        >验证</el-button
      >
    </div>
  </div>
</template>
<script>
import { ref } from "@vue/reactivity";
import { ElMessage } from "element-plus";
import axios from "axios";

var auth_key;
export default {
  setup() {
    
  },
  data() {
    //   if (
    //   localStorage.getItem("auth_key") != undefined &&
    //   localStorage.getItem("auth_key") != null
    // ) {
    //   this.$router.push({ path: "/home" });
    // }
    return {
      checked: true,
      input: ref(""),
      loading: false,
    };
  },
  methods: {
    input_change(value) {
      auth_key = value;
    },
    login_click() {
      if (auth_key == undefined || auth_key == null) {
        ElMessage.error("密钥不能为空");
        return;
      }
      this.loading = true;

      axios
        .get("/api/login", {
          params: {
            auth: auth_key,
          },
        })
        .then((res) => {
          ElMessage.success("验证成功");
          console.log(res);
          if (this.checked) {
            localStorage.setItem("auth_key", auth_key);
          }
          this.$router.push("/home")
          this.loading = false;
        })
        .catch((err) => {
          ElMessage.error("验证失败");
          console.error(err);
          this.loading = false;
        });
    },
  },
};
</script>

<style>
#app {
  position: relative;
}

#root {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, 10%);
  width: 35%;
}

.checkBox {
  text-align: end;
  margin-top: 5%;
}

.login_button {
  text-align: end;
  margin-top: 5%;
}

.button {
  width: 100%;
}
</style>
